<template>
  <view style="position: absolute;width:100%; padding-bottom: 50px;">
    <block data-src="../../../integralShop/integralShop.wxml">
      <!-- 用户信息 -->
      <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/integral_Shop.png"
        style="width:100%;height:290px;position:relative" v-if="singIn && shop"></image>
      <view style="width:100%;height:80px;position:relative;background-color:#F05342" v-else></view>
      <view class="userMsg">
        <view class="userMsg__icon">
          <view class="userMsg__icon--button" @tap="gotoBalance">
            <m-icon name="iconjifen1" size="18px" style="margin-right:5px"></m-icon>
            积分值
            <span class="userMsg__icon--button--num">{{integral}}</span>
          </view>
          <view class="userMsg__icon--button" @tap="gotoChange" v-if="stepNumber">
            <m-icon name="iconpaobu1" size="18px" style="margin-right:5px"></m-icon>
            今日步数
            <span class="userMsg__icon--button--num">{{todayStep}}</span>
          </view>
        </view>
      </view>
      <!-- 签到 -->
      <view class="sign" v-if="singIn && shop">
        <view class="sign__card">
          <view class="sign__card--top">
            <view style="font-size:14px">
              已连续签到
              <span style="color:#EC564A">{{runningDays-1}}</span>
              天
            </view>
          </view>
          <view class="sign__card--content">
            <view v-for="(item, index) in signArr" :key="index" class="form">
              <view class="sign__card--content--circle" v-if="item.type"
                style="background-color: #FCECEC;color:#F35334;font-size:14px">
                +{{item.value}}
              </view>
              <view class="sign__card--content--circle" v-else-if="!item.type" style="background-color: #F7F7F7;">
                <div class="tag" v-if="item.isAdd">
                  <em></em>
                  <view class="tag__num">+{{item.addCode}}</view>
                </div>
                <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/rectangle5.png"
                  style="width:28px;height:24px" v-if="item.isAdd"></image>
                <span class="sign__card--content--circle--values" style="color:#A4A4A4;font-size:14px" v-else>
                  +{{item.value}}
                </span>
              </view>
              <view class="sign__card--content--day" :style="'color: ' + (!item.type ? '#A4A4A4' : ' #3E3E3E') + ';'">
                {{index+1}}天
              </view>
            </view>
          </view>
          <view class="sign__card--signBtn">
            <view style="display:flex">
              <view :class="!signInState ? 'sign__card--top--sign' : 'sign__card--top--nosign'" @tap="todaySignOpt">
                {{signInState ? '已签到' : '签到领积分' }}
              </view>
              <view style="position: absolute;right: 30px;top: 25px;" @tap="gotoRule">
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="titleShop" v-if="couponList.length>0">
        <view class="titleShop__top">
          <view class="titleShop__top--line"></view>
          优惠套餐
        </view>
        <view class="couponList">
          <view v-for="(coupon, index) in couponList" :key="index" class="couponList__box">
            <view class="couponList__box--itemTop">
              <view class="couponList__box--itemTop--act">
                <span v-if="coupon.couponType===0 || coupon.couponType===2"
                  style="display:flex; align-items: flex-end;font-size: 24px;">
                  {{coupon.discount}}
                  <view style="font-size:16px;margin-bottom: 3px;margin-left: 1px;">折</view>
                </span>
                <span v-else style="display:flex; align-items: flex-end;font-size: 24px;">
                  <view style="font-size:16px;margin-bottom: 3px;margin-left: 1px;">￥</view>
                  {{coupon.discountAmount}}
                </span>
              </view>
              <view class="couponList__box--itemTop--desc">
                <view v-if="coupon.couponType===0 || coupon.couponType===1"
                  :style="'color:' + couColor[coupon.couponType]">
                  无门槛可用
                </view>
                <view v-if="coupon.couponType===2 || coupon.couponType===3"
                  :style="'color:' + couColor[coupon.couponType]">
                  满{{coupon.conditionAmount}}可用
                </view>
              </view>
            </view>
            <view class="couponList__box--itemBottom">
              <view class="couponList__box--itemTop--act" style="color:#2B2B2B;font-size:15px">
                {{coupon.integral}}
                <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/gold.png"
                  style="width:17px;height:17px"></image>
              </view>
              <view class="couponList__box--itemTop--desc" style="top:31px" :data-coupon="coupon" @tap="changeCoupon">
                <view class="changeBtn">{{coupon.totalAvailable === 0 ? '已兑完' :'兑换'}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="goodShop" v-if="goodsList.length>0"
        :style="'margin-top:' + (couponList.length>0 ? '175' : '0') + 'px'">
        <view class="titleShop__top" style="padding:10px">
          <view class="titleShop__top--line"></view>
          实物商品
        </view>
        <view class="goodsList">
          <view v-for="(good, index) in goodsList" :key="index" class="goodsList__item" @tap="gotoDetail"
            :data-good="good">
            <view class="goodsList__item--img">
              <image :src="good.pic" style="width:170px;height: 170px;"></image>
              <view v-if="good.inventory===0" class="goodsList__soldout">
                <view>已售罄</view>
                <view>SoldOut</view>
              </view>
            </view>
            <view class="goodsList__item--shopName">{{good.integralGoodName}}</view>
            <view class="goodsList__item--shopPrice">
              <view class="goodsList__item--shopPrice--price">
                <span>{{good.integralPrice}}积分</span>
              </view>
              <view class="goodsList__item--shopPrice--right">已有{{good.sales}}人兑换</view>
            </view>
            <view class="goodsList__item--shopBottom" v-if="good.guidePrice!==0">
              市场价
              <span style="text-decoration: line-through;margin-left:4px;">￥{{good.guidePrice}}</span>
            </view>
          </view>
        </view>
      </view>
      <view v-if="goodsList.length===0" class="shopNoCar"
        :style="'margin-top:' + (couponList.length>0 ? '175' : '0') + 'px'">
        <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/noCar.png" class="shop__noCar"></image>
        <view class="shop__noCar--text">暂无商品~</view>
      </view>
    </block>
  </view>
</template>

<script lang="ts">
  import {
    Component,
    Mixins
  } from 'vue-property-decorator'
  import IntegralMix from "@/mixins/integral";
  @Component({})
  export default class Integral extends Mixins(IntegralMix) {

    name = "integral";

    get isCurrent() {
      return this.$store.state.settingStore.currentTab === this.name;
    }

    // 组件周期函数--监听组件挂载完毕
    mounted() {
      uni.setNavigationBarTitle({
        title: "积分商城",
      });
      this.getShopType();
      this.getUser();
      this.getCoupon();
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/styles/_var";

  page {
    background-color: #F6F6F6;
  }

  .null {
    width: 100%;
    text-align: center;
  }

  @include b(userMsg) {
    padding: 20px 0px 20px 20px;
    position: absolute;
    top: 0px;
    width: 100%;

    @include e(icon) {
      color: white;
      padding-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      @include m (button) {
        display: flex;
        align-items: flex-end;
        font-size: 14px;

        @include m(num) {
          margin-left: 10px;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }

    @include e(user) {
      display: flex;
      justify-content: space-between;

      @include m(set) {
        display: flex;
        align-items: center;
        color: white;

        @include m (url) {
          width: 75px;
          height: 75px;
          border-radius: 50px;
          background-color: white;
          @include flex(center, center);
          margin-right: 20px;
        }

      }

      @include m(rules) {
        width: 90px;
        height: 35px;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        background-color: #929CFE;
        color: white;
        @include flex(center, center);
        margin-top: 5px;
      }
    }

    @include e(img) {
      width: 65px;
      height: 65px;
      border-radius: 50px;
    }
  }

  @include b(sign) {
    @include e(card) {
      width: 94%;
      padding: 10px 15px;
      position: absolute;
      background-color: white;
      top: 60px;
      height: 177px;
      left: 3%;
      border-radius: 10px;
      box-shadow: 15px 10px 15px -15px rgba(0, 0, 0, 0.4),
        -15px 10px 15px -15px rgba(0, 0, 0, 0.4);

      @include m(top) {
        display: flex;
        justify-content: space-between;

        @include m(sign) {
          width: 220px;
          height: 40px;
          border-radius: 50px;
          @include flex(center, center);
          color: #FFFFFF;
          border: 1px solid #E9554E;
          margin-top: 11px;
          background-color: #E9554E;
          box-shadow: 5px 5px 10px -4px #ea3323;
          background: linear-gradient(#f6522b, #e85857);
          font-size: 16px;
        }

        @include m(nosign) {
          width: 220px;
          height: 40px;
          border-radius: 50px;
          @include flex(center, center);
          color: #FFFFFF;
          border: 1px solid #A4A4A4;
          margin-top: 11px;
          background-color: #A4A4A4;
          box-shadow: 5px 5px 10px -4px #A4A4A4;
          background: linear-gradient(#A4A4A4, #A4A4A4);
          font-size: 16px;
        }
      }

      @include m(content) {
        margin-top: 1px;
        display: flex;
        justify-content: space-around;

        @include m(circle) {
          width: 42px;
          height: 42px;
          @include flex(center, center);
          border-radius: 50px;
          position: relative;

          @include m(values) {
            position: absolute;
            display: flex;
            justify-content: center;
          }
        }

        @include m(day) {
          margin-top: -15px;
          font-size: 14px;
        }
      }

      @include m(signBtn) {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
    }
  }

  .form {
    height: 80px;
    width: 45px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  @include b(title) {
    margin: 15px 10px 0px 10px;
    background-color: white;
    // padding-top: 10px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    @include e(item) {
      @include flex(center, center);
      font-weight: bold;
      font-size: 14px;
    }

    @include e(desc) {
      @include flex(center, center);
      font-size: 13px;
      color: #BEBEBE;
      margin-top: 4px;
    }

    @include e(icon) {
      display: flex;
      align-items: center;
      font-size: 17px;
      margin-top: 4px;
      font-weight: bold;
      padding-left: 10px;
    }
  }

  .tag {
    border: 1rpx solid #EE5544;
    position: relative;
    background-color: #EE5544;
    border-radius: 50px;
    position: absolute;
    top: -27px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 3px;

    .tag__num {
      color: white;
      font-size: 14px;
    }
  }

  .tag em {
    display: block;
    border-width: 5px;
    position: absolute;
    bottom: -19rpx;
    left: 25rpx;
    border-style: solid dashed dashed;
    border-color: #EE5544 transparent transparent;
    font-size: 0;
    line-height: 0;
  }

  @include b(titleShop) {
    font-size: 17px;
    font-weight: bold;
    padding: 10px;
    background-color: white;
    border-radius: 15px;
    margin-top: -20px;
    z-index: 100;
    position: absolute;
    width: 100%;

    @include e(top) {
      display: flex;
      align-items: center;
      font-size: 16px;

      @include m(line) {
        width: 5px;
        height: 17px;
        background-color: #E9554E;
        margin-right: 8px;
        border-radius: 50px;
      }
    }

  }

  @include b(couponList) {
    margin: 15px 0px 10px 0px;
    display: flex;
    overflow: auto;

    @include e(box) {
      margin-right: 26px;

      @include m(itemTop) {
        width: 86px;
        height: 57px;
        background-color: #FA7E69;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        position: relative;

        @include m(act) {
          display: flex;
          width: 100%;
          justify-content: center;
          align-items: center;
          color: white;
          font-weight: normal;
          top: 5px;
          position: absolute;
        }

        @include m(desc) {
          display: flex;
          width: 100%;
          justify-content: center;
          color: white;
          font-weight: normal;
          top: 34px;
          position: absolute;
          font-size: 11px;
        }
      }

      @include m(itemBottom) {
        width: 86px;
        height: 57px;
        background-color: #FDD8D6;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        position: relative;
      }
    }
  }

  .changeBtn {
    width: 45px;
    height: 21px;
    background-color: #EF5541;
    display: flex;
    @include flex(center, center);
    font-size: 12px;
    border-radius: 50px;
  }


  .couponList::-webkit-scrollbar {
    display: none;
  }

  .couponList__box--itemTop::before {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background-color: white;
    content: '';
    position: absolute;
    top: 50px;
    z-index: 50;
    left: -10px;
  }

  .couponList__box--itemTop::after {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background-color: white;
    content: '';
    position: absolute;
    top: 50px;
    z-index: 50;
    right: -10px;
  }

  .goodShop {
    font-size: 17px;
    font-weight: bold;
    background-color: #F6F6F6;
    border-radius: 15px;
  }


  @include b(goodsList) {
    margin: 0px 8px;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

    @include e(item) {
      width: 49.2%;
      // height: 200px;
      background-color: white;
      margin-bottom: 7px;
      border-radius: 10px;
      position: relative;

      @include m(img) {
        margin-top: 10px;
        @include flex(center, center);
      }

      @include m(shopName) {
        padding: 0px 10px;
        display: flex;
        height: 48px;
        flex-wrap: wrap;
        padding-top: 10px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
        font-weight: normal;
      }

      @include m(shopPrice) {
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 10px;
        margin-bottom: 10px;

        @include m(price) {
          display: flex;
          font-size: 13px;
          color: #F3573A;
        }

        @include m(right) {
          display: flex;
          font-size: 12px;
          color: #AEAEAE;
          font-weight: normal;
        }

        @include m(button) {
          width: 75px;
          height: 25px;
          @include flex(center);
          color: white;
          font-weight: bold;
          background-color: #FF4D63;
          border-radius: 5px;
          font-size: 12px;
        }
      }

      @include m(shopBottom) {
        padding: 0px 10px;
        display: flex;
        margin-top: 5px;
        margin-bottom: 5px;
        color: #C8C8C8;
        align-items: center;
        font-weight: normal;
        font-size: 12px;
      }
    }

    @include e(soldout) {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 90px;
      left: 90px;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 13px;
      border-radius: 50px;
      background-color: rgba(0, 0, 0, 0.5);
      border: 2px solid white;
    }


  }

  .shopNoCar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .shop__noCar {
    margin-top: 70px;
    width: 69%;
  }

  .shop__noCar--text {
    display: flex;
    justify-content: center;
    color: #acacac;
    width: 100%;
  }
</style>